<template>
  <div class="index-fixed">
    <!-- 右边导航条 -->
    <div class="right-nav">
      <div class="wrapper">
        <!-- 心 -->
        <el-popover placement="left" trigger="hover">
          <div class="fangyuan">
            <span>我关注的房源信息</span>
          </div>
          <el-button class="guanzhu" slot="reference">
            <a href=""></a>
          </el-button>
        </el-popover>
        
        <!-- 出租 -->
        <el-popover placement="left" trigger="hover">
          <div class="sell">
            <span>我要出租</span>
          </div>
          <el-button class="maifang" slot="reference">
            <a href=""></a>
          </el-button>
        </el-popover>
        
        <!-- 承诺 -->
        <el-popover placement="left" trigger="hover">
          <div class="cn">
            <span>安心服务承诺您</span>
          </div>
          <el-button class="chengnuo" slot="reference">
            <a href=""></a>
          </el-button>
        </el-popover>
        <!-- 二维码 -->
        <el-popover placement="left" trigger="hover">
          <div class="weixin_click">
            <img src="../assets/img/lsm_index_22.png" height="130px" />
            <em>链家微信小程序</em>
          </div>
          <el-button class="elbutton" slot="reference">
            <a href=""></a>
          </el-button>
        </el-popover>
        <!-- 客服 -->
        <el-popover placement="left" trigger="hover">
          <div class="kefu">
            <span>链家官方客服</span>
          </div>
          <el-button @click="open" class="gf-kefu" slot="reference">
            <a></a>
          </el-button>
        </el-popover>
        <!-- 工具 -->
        <el-popover placement="left" trigger="hover">
          <div class="jsq">
            <span>反馈 / 投诉</span>
          </div>
          <el-button class="gongju" slot="reference">
            <a></a>
          </el-button>
        </el-popover>
      </div>
      <!-- 回到顶部 -->
      <el-popover placement="left" trigger="hover" class="dv">
        <div class="db">
          <span>返回页面顶部</span>
        </div>
        <el-button
          v-show="isVisable"
          @click="goTop"
          class="dingbu"
          slot="reference"
        >
          <div target="_self"></div>
        </el-button>
      </el-popover>
    </div>

    <!-- 底部广告 -->
    <div v-show="isDisplay" class="content-guarantee">
      <div class="guarantee-content">
        <img class="guarantee-banner" src="../assets/img/detail/meng_ad_guarantee-2.png">
        <div class="mask-banner-box">
          <img class="banner-qrcode" src="../assets/img/detail/meng_close_banner_lianjia.png">
        </div>
        <img @click="Close()" class="guarantee-close" src="https://s1.ljcdn.com/matrix_pc/dist/pc/src/resource/detail/guarantee-close.png?_v=20221027201223be8">
      </div>
    </div>

    <!-- 右下客服 -->
    <div id="kf">
      <div @click="kefu" class="lianjiaim-head">
        <i></i>
        <span data-role="im-title">在线咨询</span>
      </div>
      <div v-show="kefuShow" class="liaotian">
        <ke-fu/>
      </div>
    </div>
  </div>
</template>

<script>
import KeFu from './KeFu.vue';
// 引入样式
// import '../assets/css/index_fixed.css'

export default {
  components: { KeFu },
  data() {
    return {
      isDisplay: true, 
      isVisable: false, //默认不显示false
      kefuShow: false, 
    }
  },
  methods: {
    open() {
      this.$alert(`
          <span>您可以与在线顾问进行实时沟通或者拨打客服热线获得帮助</span><br /><br />
          <span style="color: black; margin-top: 20px; margin-right: 25px;">在线咨询</span>
          <button style="color: white; background: #00ae66; padding: 3px 15px; border-radius: 4px; border: 0;">立即咨询</button>
          <span style="color: #6668; float: right">周一至周日 09:00-20:00</span><br /><br />
          <span style="color: black; margin-top: 20px; margin-right: 25px;">客服热线</span>
          <span style="color: #00ae66;">1010 9666</span>
          <span style="color: #6668; float: right">周一至周日 09:00-20:00</span><br /><br />
        `,
          '官方客服', {
        dangerouslyUseHTMLString: true,
      });
    },
    Close() {
      this.isDisplay = false;
    },
    kefu(){
      this.kefuShow = !this.kefuShow
    },
    // 点击回到顶部
    goTop() {
      // 设置滚动行为改为平滑的滚动
      window.scrollTo({
        top: 0,  //浏览器回到页面顶部
        // behavior-String, 滚动行为,支持smooth(平滑滚动),instant(瞬间滚动),默认值auto
        behavior: 'smooth',
      })
    },
    // 监听窗口滚动
    windowScrollListener() {
      //获取操作元素最顶端到页面顶端的垂直距离
      var scrollTop = document.documentElement.scrollTop
      if (scrollTop >= 400) {
        if (this.isVisable = true) {
          return
        }
        this.isVisable = false
      }
    },
  },
  // 创建阶段 created 中绑定监听事件进行监听
  created() {
    //添加滚动监听事件
    //在窗口滚动时调用监听窗口滚动方法
    window.addEventListener('scroll', this.windowScrollListener)
  },
  // 销毁阶段 destory 中删除监听事件，离开页面时删除，以保证它不会影响其他页
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.windowScrollListener)
  },
}
</script>
<style scoped>
html{ 
  overflow-x: hidden;
}
</style>
<style scoped src="../assets/css/reset.css"></style>
<style scoped src="../assets/css/detail_fixed.css"></style>
